<template>
  <div>
      <div>
          文件名称:
          <el-input placeholder="请输入文件,回车搜索..."
                    @clear="initAllUploadFiles"
                    prefix-icon="el-icon-search"
                    style="width: 350px;margin-right: 10px"
                    clearable
                    :clear="initAllUploadFiles"
                    v-model="keywords"
                    @keydown.enter.native="initAllUploadFiles"
          >
          </el-input>
          <el-button icon="el-icon-search" size="small" type="primary" @click="initAllUploadFiles" >
              搜索
          </el-button>
         
      </div>
      <!--表格开始-->
      <div style="margin-top: 8px">
        <el-table
              :data="uploadFiles"
              border
              :header-cell-style="{color: '#848484', fontSize: '15px'}"
              style="width: 100%">
          <el-table-column
                  prop="id"
                  label="编号"
                  width="60">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="文件名称"
                  width="300">
          </el-table-column>
       
          <el-table-column
                  prop="md5"
                  label="md5编码值"
                  width="290">
          </el-table-column>
            <el-table-column
                  prop="uploadTime"
                  label="上传时间"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="ext"
                  label="扩展名"
                  width="100">
          </el-table-column>
          <el-table-column label="操作"  width="180px">
              <template slot-scope="scope">
                  <el-button type="primary" size="small"  @click="downloadFile(scope.row)">下载</el-button>
                  <el-button type="success" size="small"  @click="deletefileInfo(scope.row)">删除</el-button> 
              </template>
          </el-table-column>
          <!-- <el-table-column
                  prop="path"
                  label="上传地址"
                   width="400">
          </el-table-column> -->
        </el-table>
        <div style="display:flex;justify-content:flex-end ">
            <el-pagination
                    background
                    layout="sizes, prev, pager, next, jumper, ->, total, slot"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    :total="total">
            </el-pagination>
        </div>
      </div>
      <!--表格结束-->
  </div>
</template>

<script>
// 导入封装的请求
import {getRequest,postRequest,putRequest,deleteRequest} from "../utils/api";

export default {
  name: 'DownloadFile',
    data() {
        return {
            keywords:'',
            uploadFiles:[],//显示数据
            total:0,
            dialogTitle:"添加",
            dialogVisible:false,
            size:10,  //分页每页10条数据
            page:1,   //从第一页开始
            fileInfo:{
                id:'',
                name:''
             }
        }
    },
    methods:{
       //分页
        currentChange(currentChange){
            this.page=currentChange
            this.initAllUploadFiles()
        },
        // 改变分页size
        sizeChange(sizeChange){
            this.size=sizeChange
            this.initAllUploadFiles()
        },
        /**
         * 文件列表展示 请求地址
         */
        initAllUploadFiles(){
            //调用get请求
          getRequest(this.global.server_config.url+"/fileInfos?name="+this.keywords+"&page="+this.page+"&size="+this.size).then(res=>{
              if(res){
                  this.uploadFiles=res.list
                  this.total=res.total
              }
          })
      },
       
        // 下载文件
        downloadFile(data){
            // 文件下载
           window.location.href = this.global.server_config.url+"/fileInfos/download/"+data.id
        },

        deletefileInfo(data){
            this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调用delete请求
                deleteRequest(this.global.server_config.url+"/fileInfos/"+data.id).then(res=>{
                    if(res){
                        this.initAllUploadFiles()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    //初始化数据
    mounted(){
      this.initAllUploadFiles();
    }

}
</script>
<style>
    .home{
        width: 800px;
        margin: 20px auto;
    }
</style>

